import Avatar from '@/components/Avatar';
import Image from '@/components/Image';
import { openLoginModal } from '@/components/LoginModal';
import MustLogin from '@/components/MustLogin';
import { openRegisterModal } from '@/components/RegisterModal';
import { userV1ControllerLogout } from '@/services/auto/user';
import { logout } from '@/utils';
import {
  DownOutlined,
  EditOutlined,
  PoweroffOutlined,
  UserOutlined,
} from '@ant-design/icons';
import { css } from '@emotion/react';
import { history, Link, useModel, useSearchParams } from '@umijs/max';
import { Button, Dropdown, Input, message, Modal, Space, theme } from 'antd';
import { completeImgUrl } from 'common/utils/utils';
import { useState } from 'react';
import cs from 'classnames';

export default function Header() {
  const { data, mutate } = useModel('user', ({ data, mutate }) => {
    return {
      data,
      mutate,
    };
  });
  const { token } = theme.useToken();

  const [searchParams] = useSearchParams();

  const keyword = searchParams.get('keyword') ?? '';

  const tab = searchParams.get('tab');

  const [search, setSearch] = useState<string>(keyword);

  return (
    <div
      style={{
        height: 'var(--header-height)',
        backgroundColor: '#000',
        minWidth: 'var(--content-min-width)',
      }}
      className="flex justify-center fixed top-0 left-0 right-0 z-20"
    >
      <div className="flex gap-[16px] justify-between center-container">
        <div className="flex flex-1 min-w-0">
          <Link to={{ pathname: '/home' }} className="flex items-center">
            <Image
              src={require('@/assets/imgs/logo_200x.png')}
              style={{ height: 64, width: 'auto' }}
            />
            <Image
              src={require('@/assets/imgs/huihifi_100x.png')}
              style={{ height: 32, width: 'auto' }}
            />
          </Link>
          <div
            id="header-content"
            className="ml-[16px] flex-1 min-w-0"
          />
        </div>
        <Space size="middle">
          <Input.Search
            allowClear
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            onSearch={(val) => {
              if (val !== keyword) {
                if (val) {
                  const to = {
                    pathname: '/search',
                    search: `?${tab ? `tab=${tab}&` : ''}keyword=${val}`,
                  };
                  if (history.location.pathname === '/home') {
                    window.open(history.createHref(to));
                  } else {
                    history.push(to);
                  }
                } else {
                  history.push({
                    pathname: '/home',
                    search: tab ? `?tab=${tab}` : '',
                  });
                }
              }
            }}
          />
          <MustLogin>
            <Link
              to={{
                pathname: '/personal/cloud-audition',
              }}
            >
              云试听
            </Link>
          </MustLogin>
          <MustLogin>
            <Link
              to={{
                pathname: '/personal/mixer',
              }}
            >
              AI调音定制
            </Link>
          </MustLogin>
          {data ? (
            <Dropdown
              menu={{
                items: [
                  {
                    key: 'personal',
                    icon: (
                      <UserOutlined style={{ color: token.colorPrimary }} />
                    ),
                    label: (
                      <Link
                        target="_blank"
                        to={{
                          pathname: '/personal',
                        }}
                      >
                        个人中心
                      </Link>
                    ),
                  },
                  {
                    key: 'editor',
                    icon: (
                      <EditOutlined style={{ color: token.colorPrimary }} />
                    ),
                    label: (
                      <Link
                        target="_blank"
                        to={{
                          pathname: '/personal/article',
                        }}
                      >
                        写文章
                      </Link>
                    ),
                  },
                  {
                    key: 'quit',
                    icon: (
                      <PoweroffOutlined style={{ color: token.colorPrimary }} />
                    ),
                    label: (
                      <a
                        onClick={() => {
                          Modal.confirm({
                            title: '确认退出登录吗',
                            onOk: () => {
                              return userV1ControllerLogout().then(() => {
                                message.success('退出登录成功');
                                logout();
                              });
                            },
                          });
                        }}
                      >
                        退出登录
                      </a>
                    ),
                  },
                ],
              }}
              placement="bottomLeft"
              arrow={{ pointAtCenter: true }}
            >
              <div style={{ color: '#fff' }} className="cursor-pointer">
                <Space>
                  <Avatar
                    src={completeImgUrl(
                      data.avatar,
                      '?x-oss-process=image/resize,m_fill,w_32,h_32',
                    )}
                    userName={data.name}
                    disableAvatarPopover
                  />
                  <span className="font-bold">{data.name}</span>
                  <DownOutlined />
                </Space>
              </div>
            </Dropdown>
          ) : (
            <>
              <Button
                shape="round"
                onClick={() => {
                  openLoginModal();
                }}
              >
                登录
              </Button>
              <Button
                type="primary"
                shape="round"
                onClick={() => {
                  openRegisterModal();
                }}
              >
                注册
              </Button>
            </>
          )}
        </Space>
      </div>
    </div>
  );
}
